<template>
  <div class="app-layout">
    <div class="layout-index">
      <el-menu default-active="1-4-1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"@open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-menu-item index="1">
          <i class="icon--piggybank"></i>
          <span slot="title">主页</span>
        </el-menu-item>
        <router-link to="/email">
          <el-menu-item index="2">
              <i class="icon-mail"></i>
              <span slot="title">邮件</span>
          </el-menu-item>
        </router-link>
        <router-link to="/customer">
          <el-menu-item index="3">
            <i class="icon-customerselected"></i>
            <span slot="title">客户管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/marketing">
          <el-menu-item index="4">
            <i class="icon-elevationrise"></i>
            <span slot="title">营销</span>
          </el-menu-item>
        </router-link>
      </el-menu>
    </div>

    <div class="layout-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  data () {
    return {
      isCollapse: true
    }
  },
  methods:{
   handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    }
  }
}
</script>

<style scoped>
.app-layout{
  position: relative;
}
.layout-index{
  width: 64px;
  min-height: 1000px;
  border-right: 1px solid #e6e6e6;
  position: fixed;
  left: 0;
  top:0;
  background-color: #545c64;
  z-index: 999;
}
.layout-content{
  margin: 0 0 0 65px;
}
</style>
